<template>
  <div class="ma-tree-item">
    <slot name="folder" :item="item" v-if="item.folder"></slot>
    <slot name="file" :item="item" v-else></slot>
    <slot :item="item"></slot>
    <div class="ma-tree-sub-items" v-show="item.opened">
      <magic-tree-item v-for="subItem in data" :key="'ma_tree_item_' + subItem.id + subItem._id" :item="subItem" :data="subItem.children">
        <template v-for="(value, key) in $scopedSlots" v-slot:[key]="{ item }">
          <slot :name="key" :item="item"></slot>
        </template>
      </magic-tree-item>
    </div>
  </div>
</template>

<script>
import bus from '@/scripts/bus.js'

export default {
  name: 'MagicTreeItem',
  props: {
    item: Object,
    data: Array
  }
}
</script>
<style></style>
